<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <script src="/echarts/jquery-1.11.1.min.js"></script>
  <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
  <script th:src="@{/layui/layui.js}" charset="utf-8"></script>
  <style>
    body{margin: 10px;}
    .demo-carousel{height: 800%; line-height: 800px; text-align: center;}
  </style>
</head>
<body>

<!--layUI公共模块-->
<div th:include="commonmenu :: menu"></div>

<div class="layui-body">
  <!-- 内容主体区域 -->
  <fieldset class="layui-elem-field layui-field-title" style="margin-top: 100px;">
    <legend>搜索条件</legend>
  </fieldset>

  <form action="" method="post" id="searchFrm" lay-filter="searchFrm" class="layui-form">
    <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label">省份名称</label>
          <div class="layui-input-inline">
            <input type= "text"  name="name" id="name" class="layui-input input-radius" placeholder="请输入省份">
          </div>

        </div>
        <div class="layui-inline">
            <button type="button" class="layui-btn layui-btn-sm layui-btn-radius" lay-submit="" lay-filter="doSearch"><i
                    class="layui-icon layui-icon-search layui-icon-normal"></i>查询
            </button>
            <button type="reset" class="layui-btn layui-btn-sm layui-btn-radius layui-btn-warm"><i
                    class="layui-icon layui-icon-refresh"></i><span>重置</span>
            </button>
        </div>

    </div>
  </form>

  <div style="padding: 15px;">
    <table class="layui-hide" id="demo" lay-filter="test"></table>
  </div>
</div>



<!--<script type="text/html" id="barDemo">-->
<!--  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>-->
<!--  <a class="layui-btn layui-btn-xs" lay-event="more">更多 <i class="layui-icon layui-icon-down"></i></a>-->
<!--</script>-->


<script>
  layui.config({
    version: '1632428048355' //为了更新 js 缓存，可忽略
  });

  let tableIns;

  //加载模块
  layui.use(function(){ //亦可加载特定模块：layui.use(['layer', 'laydate', function(){
                        //得到各种内置组件
    var layer = layui.layer //弹层
            ,laypage = layui.laypage //分页
            ,laydate = layui.laydate //日期
            ,table = layui.table //表格
            ,carousel = layui.carousel //轮播
            ,upload = layui.upload //上传
            ,element = layui.element //元素操作
            ,slider = layui.slider //滑块
            ,dropdown = layui.dropdown //下拉菜单
            ,form = layui.form

    //向世界问个好
    layer.msg('Hello World');

    //监听Tab切换
    element.on('tab(demo)', function(data){
      layer.tips('切换了 '+ data.index +'：'+ this.innerHTML, this, {
        tips: 1
      });
    });

    //执行一个 table 实例
    tableIns = table.render({
      elem: '#demo'
      ,height: 420
      ,url: '/listDataByPage' //数据接口
      ,title: '用户表'
      ,page: true //开启分页
      ,toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
      ,totalRow: true //开启合计行
      ,cols: [ [ //表头
        {type: 'checkbox', fixed: 'left'}
        ,{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left', totalRowText: '合计：'}
        ,{field: 'name', title: '省份', width:150}
        ,{field: 'value', title: '数量', width: 150, sort: true}
        // ,{fixed: 'right', width:1000 , align:'center', toolbar:'#barDemo'}
       ] ]
    });


    //模糊查询
    form.on("submit(doSearch)", function (data) {
      tableIns.reload({
        where:data.field,
        page: {
          curr: 1
        }
      });
      return false;
    })

    //分页
    laypage.render({
      elem: 'pageDemo' //分页容器的id
      ,count: 1000 //数据总数
      ,limit: 20 //每页显示的数据条数
      ,skin: '#1E9FFF' //自定义选中色值
      //,layout: ['prev', 'page', 'next', 'count', 'limit', 'refresh', 'skip'] //自定义排版
      ,jump: function(obj, first){
        if(!first){
          layer.msg('第'+ obj.curr +'页', {offset: 'b'});
        }
      }
    });
  });
</script>

</body>
</html>
